<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Registrar</title>
<script src="jquery.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<c:import url="menu.jsp" />

<script src="jquery.js"></script>
	<center>
	M&eacute;dia do consumo de calorias<br/>por dia da semana.
	<div style="margin-top: 30px; background-image: url(images/cartesiano_semana.png); width: 300px; height: 185px; text-align: left;">
	<div id="grafico" style="margin-left: 90px;"> </div>
	<img id="segunda" style="margin-left: 40px; margin-top: 20px;" src="images/barraGraficoSemanal.png" height="16px" width="0px"/><br>
	<img id="terca" style="margin-left: 40px;" src="images/barraGraficoSemanal.png" height="16px" width="0px"/><br>
	<img id="quarta" style="margin-left: 40px;" src="images/barraGraficoSemanal.png" height="16px" width="0px"/><br>
	<img id="quinta" style="margin-left: 40px;" src="images/barraGraficoSemanal.png" height="16px" width="0px"/><br>
	<img id="sexta" style="margin-left: 40px;" src="images/barraGraficoSemanal.png" height="16px" width="0px"/><br>
	<img id="sabado" style="margin-left: 40px;" src="images/barraGraficoSemanal.png" height="16px" width="0px"/><br>
	<img id="domingo" style="margin-left: 40px;" src="images/barraGraficoSemanal.png" height="16px" width="0px"/><br>
	</div>
	</center>
	<script>
		var tamanhoMil = 49;
		$("#grafico").empty().append("<img src='images/carregando.gif'/><br/>Carregando");

		$.post('RelatorioDiaSemanaServlet', function(retorno) {
			$("#grafico").empty();
			eval("dados = " +retorno +";");

			if(dados.seg > 0) $("#segunda").animate({ width: dados.seg/1000*tamanhoMil-1}, 1000 );
			
			if(dados.ter > 0) $("#terca").animate({ width: dados.ter/1000*tamanhoMil-1}, 1000 );
			
			if(dados.qua > 0) $("#quarta").animate({ width: dados.qua/1000*tamanhoMil-1}, 1000 );
			
			if(dados.qui > 0) $("#quinta").animate({ width: dados.qui/1000*tamanhoMil-1}, 1000 );
			
			if(dados.sex > 0) $("#sexta").animate({ width: dados.sex/1000*tamanhoMil-1}, 1000 );
			
			if(dados.sab > 0) $("#sabado").animate({ width: dados.sab/1000*tamanhoMil-1}, 1000 );
			
			if(dados.dom > 0) $("#domingo").animate({ width: dados.dom/1000*tamanhoMil-1}, 1000 );
		});
	</script>
</body>
</html>